<template>
  <div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
      @close="close"
    >
      <button @click="clear">清空</button>
      <h1>一号口袋</h1>
      <van-card
        v-for="item in $store.state.shoplist"
        :key="item.cid"
        :desc="String(item.price * item.num)"
        :price="item.price"
        :title="item.title"
        :thumb="item.img"
        v-show="item.card == 1"
        @touchstart="start(item)"
        @touchend="end"
      >
        <template #footer>
          <van-stepper v-model="item.num" />
        </template>
      </van-card>

      <h1>2号口袋</h1>
      <van-card
        v-for="item in $store.state.shoplist"
        :key="item.cid"
        :desc="String(item.price * item.num)"
        :price="item.price"
        :title="item.title"
        :thumb="item.img"
        v-show="item.card == 2"
      >
        <template #footer>
          <van-stepper v-model="item.num" />
        </template>
      </van-card>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from "vant";

export default {
  data() {
    return {
      loop: null,
    };
  },
  props: ["show"],

  methods: {
    close() {
     
      this.$emit("close");
    },
    clear() {
      Dialog.confirm({
        title: "标题",
        message: "是否确认清空购物车",
      })
        .then(() => {
          // on confirm
          this.$store.commit("clear");

          this.$emit("close");
        })
        .catch(() => {
          // on cancel
        });
    },

    start(item) {
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
      this.loop = setTimeout(() => {
        console.log("长按了");
        this.$store.commit("changecard", item);
      }, 500);
    },
    //长按500ms把一号口袋的商品放在二号口袋里

    end() {
      clearTimeout(this.loop); //清空定时器，防止重复注册定时器
    },
  },
};
</script>
